<template>
    <div class="container">
        <div class="select-container">
            请选择上传的资源类型：
            <el-select v-model="selec_value" @change="onSelectChange" class="el-select" placeholder="点击选择" size="large">
                <el-option class="el-option" v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </div>
        <div class="upload-container">

            <component @uploadByPath="onUploadByPath" @uploadVideo="onUploadVideo" :is="cur_comp"
                :resource_name="selec_value == 2 ? '章节' : '课程'"></component>

        </div>
    </div>
</template>

<script setup>
import { shallowRef, watch } from "vue-demi";
import DragUploadFile from "../../../components/upload/DragUploadFile.vue";
import UploadByPath from "../../../components/upload/UploadByPath.vue";
import { ResourceType } from "../../../libs/enum";
import { Chapter, Video, Course } from "../../../model/resource";
import store from "../../../store";
import { ShowTip } from "../../../utils/utils";
const options = [
    { label: '视频', value: 1 },
    { label: '章节', value: 2 },
    { label: '课程', value: 3 }
]
const cur_comp = shallowRef(DragUploadFile)
const selec_value = shallowRef(options[0])
watch(selec_value, (new_val, old_val) => {
    // watch可以实现我要的功能
    switch (new_val) {
        case 1: {
            cur_comp.value = DragUploadFile
            break;
        }
        case 2: {
            cur_comp.value = UploadByPath
            break;
        }
        case 3: {
            cur_comp.value = UploadByPath
            break;
        }
    }
})


const emits = defineEmits()

async function onUploadVideo(param) {
    // ShowTip.showLoading(`正在上传视频：${param.file.name}...`) // 开始上传
    ShowTip.warningBox('任务提交成功！（任务将在后台进行中, 期间退出客户端不会产生影响。并可以继续提交新的任务。）')
    let res = await new Video().upload(param.file)
    if (res && res.status && `${res.status}`.startsWith('2')) {
        // store.state.router.data = res.data
        // ShowTip.hideLoading()
        emits('uploadSuccess', { type: 1 })
        ShowTip.successBox(`视频(${res.data.msg.name})上传并处理成功`)
    }
    else {
        // ShowTip.hideLoading()
        ShowTip.errorBox(`上传任务[视频(${param.file.name})]失败，请重试！`)
    }
}

const onUploadByPath = async (param) => {
    console.log('参数', param)
    ShowTip.warningBox('任务提交成功！（任务将在后台进行中, 期间退出客户端不会产生影响。并可以继续提交新的任务。）')
    if (param.type == 3) {// 异步编程
        // 并将任务添加到处理队列中，API，查询处理状态？可以先DB创建该记录，返回ID，然后如果O_PAHT为空，则没有处理完毕，添加的操作需要大改，需要先commit后再进行后续的处理，如果出错还需要删除，commit的操作，需要留到最外面的一层进行调用，问题又来了，
        // console.log('参数',param)
        // let res = (await new Course().upload(param.path))
        // // console.log('结果',res)
        // if (res && res.status && `${res.status}`.startsWith('2')) {
        //     console.log(res.data)
        //     ShowTip.successBox(`课程(${res.data.msg.name})上传并处理完成！`)
        //     // ShowTip.hideLoading()
        //     emits('uploadSuccess', { type: 3 })
        // }
        // else {
        //     // ShowTip.hideLoading()
        //     ShowTip.errorBox(`上传任务[课程(${param.path})]失败，请重试！`)
        // }

        (new Course().upload(param.path)).then(res => {
            console.log(res)
            ShowTip.successBox(`课程(${res.data.name})上传并处理完成！`)
        }).catch((data) => {
            console.log(data)
            ShowTip.errorBox(`上传任务[课程(${param.path})]失败，请重试！`)
        })

    } else if (param.type == 2) {
        (new Chapter().upload(param.path)).then(res => {
            // console.log(data)
            ShowTip.successBox(`章节(${res.data.name})上传并处理完成！`)
        }).catch((data) => {
            console.log(data)
            ShowTip.errorBox(`上传任务[章节(${param.path})]失败，请重试！`)
        })
    }
    // emits('uploadSuccess', {type: param.type})
}

</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 720px;

}

.select-container {
    margin: 30px;
}

.el-select {}


.el-option {}

.upload-container {}
</style>